<style scoped>

.pro-con {
    padding: 0 20px;
    margin-bottom: 50px;
}
.pro-con .ivu-form-item{
    margin-bottom: 0;
}

.pro-con .ivu-col{
    padding-right: 0 !important;

}
 .fr{
    float: right;
}
.pro-pagesize .mr10{
    margin-right: 10px;
}
.search-h3{
    font-size: 18px;
    color: #ef8412;
    font-weight: normal;
    margin-bottom: 20px;
}


    /*//////////////////////////////*/


.search-h3{
    font-size: 18px;
    color: #ef8412;
    font-weight: normal;
    margin-bottom: 20px;
}
.search-form{
    border-bottom: 1px solid #d9d9d9;
}
.search-form .ivu-col{
    margin-bottom: 15px;
}
.clear{
    clear: both;
}
.table-theme{
    clear: both;
}
.table-action{
    padding-top: 0;
    padding-bottom: 15px;
}
.pro-pagesize{
    margin-bottom:10px;

}

.common-box-body.pr0 .ivu-form-item{
    padding-right: 0 !important;
}
</style>
<template>
    <div class="pro-list">
        <product-title></product-title>
        <div class="pro-con">
            <div class="pro-con-f common-box-body">
                <Row>
                    <!-- <h3 class="search-h3 huang" >
                        快速搜索
                    </h3> -->
                        <Form :model="formItem" ref="formItem" class="search-form">
                            <Row>
                                <Col :xs="24" :sm="24" :md="24" :lg="12">
                                    <!-- <Form-item label="分类名称">
                                        <Input v-model="formItem.cate_name" placeholder="请输入分类名称"></Input>
                                    </Form-item> -->
                                </Col>
                                <Col :xs="24" :sm="24" :md="24" :lg="8">
                                    <!-- <Form-item label="分类级别">
                                        <i-select placeholder="请选择" :transfer="true" filterable v-model="formItem.pid">
                                            <i-option value="0">根分类</i-option>
                                            <template v-for="item in cate_first_list">
                                                <Option :value="item.id" :key="item.id">{{item.cate_name}}</Option>
                                            </template>
                                        </i-select>
                                    </Form-item> -->
                                </Col>
                                <Col :xs="24" :sm="24" :md="24" :lg="4" class="table-action" >
                                    <Button v-if="$isShow('compensate_cate/create')" type="warning" size="large" class="fr" icon="plus"  @click="modal1True">新增</Button>
                                    <!-- <div style="border-right: 1px solid #EDF2F6;padding-right: 15px;margin-right: 15px;" class="fr">
                                            <span class="clear"></span>
                                        <Button type="info" size="large" class="fr"   icon="ios-search" @click="search">搜索</Button>
                                    </div> -->
                                </Col>
                                <div class="clear"></div>
                            </Row>
                        </Form>
                </Row>
            </div>
            <div class="table-theme highlight_table">
                <Table :loading="tableloading" ref="currentRowTable"  @on-current-change="tableCurrentChange($event)" size="large" stripe highlight-row border :columns="header" :data="classList"></Table>
            </div>
            <div id="footer">                
                <Row class="pro-pagesize">
                    <Col :md="24" :lg="16">
                        <i-button v-if="$isShow('compensate_cate/del')" type="error" class="fl mr10 " :disabled="disabled" @click="remove">删除</i-button>
                        <i-button v-if="$isShow('compensate_cate/update')" type="info" class="fl mr10 " :disabled="disabled" @click="toDetail">编辑</i-button>
                            
                    </Col>
                    <Col :md="24" :lg="8" class="tRight">
                        <!-- <Page ref="pages"  :total="classTotal" show-total show-sizer  show-elevator :page-size="pagesize" @on-change="pageChange" @on-page-size-change="pageSizeChange" placement="top" class="page"></Page> -->
                    </Col>
                </Row>
            </div>
        </div>
        <Modal
        v-model="modal1"
        title="新增知识分类"
        :mask-closable="false"
        @on-ok="ok"
        @on-cancel="cancel">
        <Form class="common-box-body pr0" :model="form">
            <i-col span="24">
                <FormItem label="上级分类" class="pr0">
                    <i-select v-model="form.pid">
                        <i-option value="0">根分类</i-option>
                        <template v-for="item in cate_first_list">
                            <i-option :value="item.id" :key="item.id">{{item.cate_name}}</i-option>
                        </template>
                    </i-select>
                </FormItem>
            </i-col>
            <i-col span="24">
                <FormItem label="分类名称" class="pr0">
                    <i-input placeholder="请输入分类名称" v-model="form.cate_name"></i-input>
                </FormItem>
            </i-col>
        </Form>
    </Modal>
    </div>
</template>

<script>
    import productTitle from '../../components/productTitle.vue'
    import {get_list,saveCate,cate_detail,update_cate,delCate,get_cate_one} from '../../api/compensate_cate'
    export default {
        data() {
            return {
                formItem: {
                    name: '',
                    pid: '',
                    p:'1',
                    pagesize:'10'
                },
                total:0,
                modal1:false,
                header: [
                    {
                        type:'index',
                        title:'序号',
                        width:'60',
                        align:'center'
                    },
                    {
                        key:'pid_name',
                        title:'分类级别' ,
                        align:'center'                  
                    },
                    {
                        key:'cate_name',
                        title:'分类名称',
                        align:'center'               
                    },
                ],
                form:{
                    pid:'',
                    cate_name:'',
                },
                disabled:true,
                tableloading:true,
                p:1,
                pagesize:10,
                cate_first_list:[],
                classList:[],
                current:{},
                classTotal:0,
                //判断是否应该新增
                panduan:true,
            }
        },
        components: {
            productTitle
        },
        created(){
        },
        activated(){
            this.getList();
            this.gitCateFirst();
        },
        methods:{
            add(){
                this.$router.push({name:'compensate_class_create'});
            },
        tableCurrentChange(currentRow,oldCurrentRow){
            this.disabled = false;
            this.current = currentRow;
        },
        //编辑
        toDetail(){
            this.panduan = false;
            this.form.pid="";
            this.form.cate_name="";
            this.modal1True();
            let params={
                id:this.current.id
            }
            new Promise((resolve,reject) =>{
                cate_detail(params).then(response=>{
                    if(response.data.err==0){
                        this.form = response.data.data;
                    }else{
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error =>{
                    reject(error);
                });
            })
        },

        getList1() {
            this.formItem.p=this.p;
            this.formItem.pagesize=this.pagesize;
            new Promise((resolve, reject) => {
                get_list(this.formItem).then(response => {
                    if(response.data.err==0){
                        this.classTotal = response.data.data.total;
                        let _this = this;
                        let list = [];
                        response.data.data.list.map((item,index)=>{
                            if(item.son){
                                list.push({
                                    pid_name:'根分类',
                                    id:item.id,
                                    cate_name:item.cate_name,
                                })
                                item.son.map((item1,index1)=>{
                                    list.push({
                                        pid_name:item.cate_name,
                                        id:item1.id,
                                        cate_name:'(二)'+item1.cate_name,
                                    })
                                })
                            }else{
                                list.push({
                                    pid_name:'根分类',
                                    id:item.id,
                                    cate_name:item.cate_name,
                                })
                            }
                         })
                        this.classList = list;
                        this.tableloading = false;
                         
                    }else{
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        getList(){
             this.formItem.p=this.p;
            this.formItem.pagesize=this.pagesize;
            new Promise((resolve, reject) => {
                get_list(this.formItem).then(response => {
                    if(response.data.err==0){
                        this.classTotal = response.data.data.total;
                        let _this = this;
                        this.classList = response.data.data.list;
                        this.tableloading = false;
                         
                    }else{
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        gitCateFirst(){
            new Promise((resolve,reject) =>{
                get_cate_one().then(response=>{
                    if(response.data.err==0){
                        this.cate_first_list = response.data.data;
                    }else{
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error =>{
                    reject(error);
                });
            })
        },
        remove() {
            this.$Modal.confirm({
                title: '提示',
                content: '是否要删除该条记录?',
                onOk: () => {
                    var _param = {
                        id:this.current.id
                    }
                    new Promise((resolve,reject) =>{
                        delCate(_param).then(response=>{
                            if(response.data.err==0){
                                // this.getList();
                                this.$Message.success('操作成功!!!');
                                // this.gitCateFirst();
                                location.reload();
                            }else{
                                
                                    this.$Message.error(response.data.info);
                            }
                            resolve();
                        }).catch(error =>{
                            reject(error);
                        });
                    })
                },
            });
            
        },
        pageChange(value) {
            this.p = value;
            // let _query = Object.assign({},this.searchForm,{p:value,pagesize: this.pagesize})
            // this.$router.push({name:'pro',query:_query})
            this.getList();
        },
        pageSizeChange(value) {
            this.pagesize = value;
            this.getList();
        },
        addParter(){
            this.$router.push({name:'com_edit'})
        },
        parter_update(){
            this.$router.push({name:'com_edit2',params:{id:this.current.id}})
        },
        search(){
            this.getList();
        },
        ok(){
            if(!this.panduan){
                new Promise((resolve,reject) =>{
                    update_cate(this.form).then(response=>{
                        if(response.data.err==0){
                            this.getList();
                            this.form.pid="";
                            this.form.cate_name="";
                            this.gitCateFirst();
                            this.$Message.success('操作成功');
                        }else{
                            if(response.data.err==1201){
                                this.$Message.error('请完善信息');
                            }else{
                            this.$Message.error(response.data.info);

                            }
                        }
                        resolve();
                    }).catch(error =>{
                        reject(error);
                    });
                })
            }
            if(this.panduan){
                new Promise((resolve,reject) =>{
                    saveCate(this.form).then(response=>{
                        if(response.data.err==0){
                            this.getList();
                            this.form.pid="";
                            this.form.cate_name="";
                            this.gitCateFirst();
                            this.$Message.success('操作成功');
                        }else{
                            if(response.data.err==1201){
                                this.$Message.error('请完善信息');
                            }else{
                                this.$Message.error(response.data.info);
                            }
                        }
                        resolve();
                    }).catch(error =>{
                        reject(error);
                    });
                })
            }
            
        },
        cancel(){
            this.form.pid = "";
            this.form.cate_name = '';
            this.panduan = true;
            this.model1 = false;
            
        },
        modal1True(){
            this.modal1 = true;
        },
    }

}
</script>

